<template>
  <a-card class="issueData">
    <a-row :gutter="24">
      <a-col :lg="24" :md="24" :sm="24">
        <a-card class="card" title="出单列表" :bordered="false">
          <div class="userbox">
            <ul class="siderBar" @click="letterChange">
              <li v-for="item in letterList" :key="item.id">
                <input
                  class="radio"
                  :id="item.letter"
                  type="radio"
                  name="letter"
                  :value="item.letter"
                  v-model="letter" />
                <label :for="item.letter" style="cursor:pointer">{{ item.letter }}</label>
              </li>
            </ul>
            <div class="leftgroup">
              <div class="scrollBox" id="scrollBox">
                <ul style="padding-left:0" @click="userChange">
                  <li>
                    <input
                      class="radio"
                      id="0"
                      type="radio"
                      name="radios"
                      value="0"
                      v-model="radio" />
                    <label for="0" style="cursor:pointer">全部员工</label>
                  </li>
                  <li v-for="item in userList" :key="item.id">
                    <input
                      class="radio"
                      :id="item.id"
                      type="radio"
                      name="radios"
                      :value="item.id"
                      v-model="radio" />
                    <label :for="item.id" :class="item.firstWord" style="cursor:pointer">{{ item.user }}</label>
                  </li>
                </ul>
              </div>
            </div>
            <div class="rightTab">
              <a-form style="margin-left:20px;" @submit="handleSubmit" :form="form" class="form">
                <a-row class="form-row" :gutter="24">
                  <a-col :lg="3" :md="8" :sm="24">
                    <a-form-item>
                      <a-select defaultValue="today" @change="todayChange">
                        <a-select-option value="today">今天</a-select-option>
                        <a-select-option value="yesterday">昨天</a-select-option>
                        <a-select-option value="week">本周</a-select-option>
                        <a-select-option value="lastweek">上周</a-select-option>
                        <a-select-option value="month">本月</a-select-option>
                        <a-select-option value="lastmonth">上月</a-select-option>
                        <a-select-option value="quarter">半年</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>

                  <a-col :lg="3" :md="8" :sm="24">
                    <a-form-item>
                      <a-input v-model="skuId" placeholder="商品ID 选填" />
                    </a-form-item>
                  </a-col>
                  <a-col :lg="3" :md="8" :sm="24">
                    <a-form-item>
                      <a-input v-model="shopName" placeholder="店铺名称 选填" />
                    </a-form-item>
                  </a-col>
                  <a-col :lg="3" :md="8" :sm="24">
                    <a-form-item>
                      <a-select style defaultValue="rank" @change="typeChange">
                        <a-select-option value="rank">排行</a-select-option>
                        <a-select-option value="all">所有</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>

                  <a-col :lg="2" :md="8" :sm="24">
                    <a-form-item>
                      <a-button htmlType="submit" type="primary">查找商品</a-button>
                    </a-form-item>
                  </a-col>
                  <a-button
                    style="float:right;text-align:center;padding:0 15px 0 0;"
                    type="primary"
                    @click="exportToExcel"><span style="padding:0 15px;">导出为EXCEL</span></a-button>
                </a-row>
              </a-form>
              <div class="scrollBox">
                <a-table
                  style="margin-left:20px;margin-bottom:60px;margin-right:10px"
                  :columns="columns"
                  :rowKey="orderList => orderList.jdo_order_time+orderList.jdg_sku_id"
                  :dataSource="orderList"
                  :loading="loading"
                  :pagination="pagination"
                  @change="handleTableChange">
                  <div slot="detailInfo" slot-scope="row">
                    <div class="ant-list-item-meta">
                      <div class="ant-list-item-meta-avatar">
                        <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-image">
                          <img :src="'https://img14.360buyimg.com/n1/'+row.jdg_image_url" />
                        </span>
                      </div>
                      <div class="ant-list-item-meta-content">
                        <div class="ant-list-item-meta-description">
                          <a target="_blank" :href="'//item.jd.com/'+row.jdg_sku_id+'.html'">
                            <span class="detail-name">{{ row.jdg_sku_name }}</span>
                          </a>
                          <span style="color:#000">￥{{ row.jdg_price }}</span>
                          <span style="margin-left:20px">{{ row.jdg_shop_name }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div slot="time" slot-scope="row">
                    {{ row.jdg_start_time }}
                    <br />
                    {{ row.jdg_end_time }}
                  </div>
                  <span slot="finalRate" slot-scope="row">{{ row.jdo_final_Rate }}%</span>
                  <span slot="serviceRate" slot-scope="row">{{ row.jdg_service_rate }}%</span>
                  <span slot="skuNum" slot-scope="row">{{ row.jdo_sku_num }}</span>
                  <span slot="cosPrice" slot-scope="row">￥{{ row.jdo_estimate_cos_price }}</span>
                  <span slot="cosComm" slot-scope="row">￥{{ row.jdo_estimate_commission }}</span>
                </a-table>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import {
  getUserOrderList,
  getUserList
} from '@/api/admin/user'
import vPinyin from '@/assets/js/vue-py.js'
import {
  exportExcel
} from '@/assets/js/Export2Excel'

const columns = [{
  title: '姓名',
  width: 150,
  dataIndex: 'user',
  scopedSlots: {
    customRender: 'user'
  }
},
{
  title: '商品信息',
  width: 500,
  scopedSlots: {
    customRender: 'detailInfo'
  }
},
{
  title: '参与时间',
  scopedSlots: {
    customRender: 'time'
  }
},
{
  title: '预估金额',
  scopedSlots: {
    customRender: 'cosPrice'
  }
},
{
  title: '预估佣金',
  scopedSlots: {
    customRender: 'cosComm'
  }
},
{
  title: '服务费率',
  scopedSlots: {
    customRender: 'serviceRate'
  }
},
{
  title: '分成比例',
  scopedSlots: {
    customRender: 'finalRate'
  }
},
{
  title: '下单数量',
  scopedSlots: {
    customRender: 'skuNum'
  }
}
]
export default {
  name: 'IssueData',
  data () {
    return {
      radio: 0,
      description: '显示你所有出单的商品列表.',
      skeLoading: true,
      value: 1,
      // form
      form: this.$form.createForm(this),
      columns,
      pagination: {},
      loading: false,
      orderList: [],
      userList: [],
      values: {
        userId: undefined,
        timeSolt: 'today',
        type: 'rank',
        skuId: '',
        shopName: ''
      },
      timeSolt: 'today',
      type: 'rank',
      idd: '',
      shopName: '',
      skuId: '',
      pinYin: [],
      letter: '',
      letterList: [{
        id: 1,
        letter: 'A'
      }]
    }
  },
  created () {
    this.idd = this.$route.query.id
    // console.log('this.$route.query.id', this.$route.query.id)
    if (this.idd !== undefined) {
      this.radio = this.idd
    }
    this.getUserOrderList({
      userId: this.idd,
      timeSolt: 'today',
      type: 'rank',
      page: 1,
      pageSize: 15
    })
    this.getUserList()
  },
  mounted () {},
  methods: {
    exportToExcel () {
      // excel数据导出
      require.ensure([], () => {
        const tHeader = ['姓名', '商品名称', '商品价格', '店铺名称', '预估金额', '预估佣金', '服务费率', '分成比例', '下单数量', '开始时间', '结束时间']
        const filterVal = ['user', 'jdg_sku_name', 'jdg_price', 'jdg_shop_name', 'jdo_estimate_cos_price',
          'jdo_estimate_commission', 'jdg_service_rate', 'jdo_final_Rate', 'jdo_sku_num', 'jdg_start_time',
          'jdg_end_time'
        ]
        const list = this.orderList
        // const excelName = 'excel名称'
        const data = this.formatJson(filterVal, list)
        exportExcel(tHeader, data, '出单数据')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    letterChange (e) {
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation()
      if (e.target.nodeName.toLowerCase() === 'input') {
        // console.log('e.target.value', e.target.value)
        const letter = e.target.value.toString()
        // const str = '#' + letter
        // this.$nextTick(function () {
        // })
        // console.log('ref', document.getElementById(letter))
        var checkBox = document.getElementsByClassName(letter)[0]
        var scrollBox = document.getElementById('scrollBox')
        // checkBox.offsetTop = 0
        // console.log('ref', checkBox.offsetTop)
        // console.log('scrollBox', scrollBox.scrollTop)
        scrollBox.scrollTop = checkBox.offsetTop
        // if (e.target.id !== 'a') {
        // this.idd = e.target.id
        // var filterArr = this.userList.filter(e => e.id === parseInt(this.idd))
        // console.log('filterArr', filterArr[0])
        // this.passName = filterArr[0].user

        // } else {
        // this.passName = ''

        // }
      }
    },
    userChange (e) {
      this.timeSolt = 'today'
      this.type = 'rank'
      this.skuId = ''
      this.shopName = ''
      this.idd = 0
      if (e.target.nodeName.toLowerCase() === 'input') {
        // console.log(e.target.id)
        this.idd = e.target.id
        this.getUserOrderList({
          userId: this.idd === '0' ? undefined : this.idd,
          timeSolt: this.timeSolt,
          type: this.type,
          page: 1,
          pageSize: 15
        })
      }
    },
    getUserList () {
      getUserList({
        /*  rank: 1, */
        pageSize: 99999
      })
        .then(res => {
          // console.log('用户列表', res.result)
          this.userList = res.result.data
          if (this.idd !== '') {
            // console.log('idd', this.idd)
            // var ac = this.userList.filter(e => e.id === this.idd)
            // console.log('ac', ac[0])
            // this.userTitle = ac[0].user
            // console.log('this.groupde', this.groupde)
            const pinYin = []
            const array = []
            this.userList.map(e => {
              pinYin.push(e.user)
              return pinYin
            })
            this.userList.map((item, index) => {
              array.push(
                Object.assign({}, item, {
                  initial: '',
                  rankingnum: '',
                  firstWord: ''
                })
              )
              return array
            })
            // console.log('pinYin', pinYin)
            // console.log('array', array)
            for (var j = 0; j < pinYin.length; j++) {
              this.pinYin = vPinyin.chineseToPinYin(pinYin[j])
              // console.log('小写', this.pinYin)
              let SX = ''
              for (var i = 0; i < this.pinYin.length; i++) {
                var c = this.pinYin.charAt(i)
                if (/^[A-Z]+$/.test(c)) {
                  SX += c
                }
              }
              let firstWord = ''
              var b = this.pinYin.charAt(0)
              if (/^[A-Z]+$/.test(b)) {
                firstWord += b
              }
              array[j].initial = SX
              array[j].rankingnum =
                  SX.substring(0)
                    .charCodeAt()
                    .toString() +
                  SX.substring(1)
                    .charCodeAt()
                    .toString()
              array[j].firstWord = firstWord
              // console.log('大写', SX)
            }
            // console.log('array', array)
            this.userList = array
            var compare = function (obj1, obj2) {
              var val1 = obj1.rankingnum
              var val2 = obj2.rankingnum
              if (val1 < val2) {
                return -1
              } else if (val1 > val2) {
                return 1
              } else {
                return 0
              }
            }
            this.userList = this.userList.sort(compare)
            this.letterList = this.userList.map(function (obj) {
              var rObj = {}
              rObj.id = obj.id
              rObj.letter = obj.firstWord
              return rObj
            })
            var array1 = []
            var obj = {}
            for (var a = 0; a < this.letterList.length; a++) {
              if (!obj[this.letterList[a].letter]) {
                array1.push(this.letterList[a])
                obj[this.letterList[a].letter] = true
              }
            }
            this.letterList = array1
            // console.log(array1)
            // console.log('this.letterList', this.letterList)
          }
        })
        .catch(() => {
          // this.loading = false
        })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.values.shopName = this.shopName
      this.values.timeSolt = this.timeSolt
      this.values.userId = this.idd
      this.values.type = this.type
      this.values.skuId = this.skuid
      this.values.pageSize = 15
      this.values.page = 1
      this.pagination.current = 1
      // this.form.validateFields((err, values) => {
      //   if (!err) {
      //     values.type = this.type
      //     values.timeSolt = this.timeSolt
      //     values.userId = this.idd
      //     values.page = 1
      //     values.pageSize = 15
      //     this.values = values
      //     console.log('values', values)
      //   }
      this.getUserOrderList(this.values)
      // })
    },
    todayChange (value) {
      this.timeSolt = value
    },
    typeChange (value) {
      this.type = value
    },
    handleTableChange (pagination, filters, sorter) {
      const param = this.values
      param.pageSize = pagination.pageSize
      param.page = pagination.current
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager

      this.getUserOrderList(this.values)
    },
    getUserOrderList (parameter) {
      this.loading = true
      // console.log('parameter', parameter)
      if (parameter.userId === 0) {
        parameter.userId = undefined
      }
      getUserOrderList(parameter)
        .then(res => {
          this.skeLoading = false
          // this.values.userId = undefined
          // this.idd = 0
          // console.log('出单', res.result.data)
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.result.total
          this.pagination = pagination
          this.orderList = res.result.data
          this.loading = false
        })
        .catch(() => {
          this.skeLoading = false
          this.loading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
  ul li {
    list-style: none;
  }

  .issueData {
    .userbox {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;

      .siderBar {
        display: inline-block;
        position: absolute;
        left: -80px;
        top: 20px;

        input {
          display: none;
        }

        label {
          text-align: center;
          display: inline-block;
          width: 25px;
          height: 20px;
          border: none;
          // height: 50px;
          line-height: 20px;
          text-align: center;
          border-radius: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        input:checked+label {
          font-size: 20px;
          background-color: rgb(42, 86, 206);
          color: white;
        }
      }

      .scrollBox {
        overflow-y: auto;
        height: 100%;
        width: calc(100% + 20px);
      }

      .leftgroup {
        width: 10%;
        height: 800px;
        overflow: hidden;
        background-color: #fff;
        border-right: 1px solid rgb(202, 199, 199);

        input {
          display: none;
        }

        label {
          display: inline-block;
          width: 80%;
          border: none;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        input:checked+label {
          background-color: rgb(42, 86, 206);
          color: white;
        }
      }
    }

    .rightTab {
      width: 90%;
      height: 800px;
      overflow: hidden;
    }
  }

  .detail-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 16px;
    margin-bottom: 5px;
  }

  @media screen and (max-width: 1200px) {
    .issueData {
      .userbox {
        width: 100%;
        display: block;

        .siderBar {
          display: none;
        }

        .leftgroup {
          width: 100%;
          height: 100%;
          border-right: none;

          ul {
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            li {
              width: 80px;
              height: 40px;

              label {
                width: 80px;
                height: 40px;
                line-height: 40px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }

        .rightTab {
          width: 90%;
        }
      }
    }
  }
</style>>
